Templates (XAML)

Templates w języku XAML (eXtensible Application Markup Language) to specjalne struktury opisujące, jak ma wyglądać i zachowywać się element interfejsu użytkownika. Pozwalają one oddzielić logikę prezentacji od logiki aplikacji, co ułatwia ponowne użycie kodu i utrzymanie spójnego wyglądu aplikacji.

Podstawowe pojęcia

DataTemplate – definiuje wizualizację danych pochodzących z modelu (np. obiektów w MVVM).
ControlTemplate – opisuje kompletny układ i zachowanie kontrolki, zamieniając jej domyślny wygląd.
ItemsPanelTemplate – określa panel (np. StackPanel, WrapPanel), w którym rozmieszczane są elementy kolekcji.
Style – choć nie jest szablonem w ścisłym sensie, często łączy się go z szablonami, aby nakładać zestawy właściwości i szablonów jednocześnie.

Rodzaje szablonów

DataTemplate

Używany, gdy chcemy sprecyzować, w jaki sposób wyświetlane są poszczególne rekordy danych. Przykładowo, w ListBox lub ListView można określić, że każdy element listy ma postać TextBlock z określonym formatowaniem.

ControlTemplate

Definiuje pełny wygląd kontrolki, w tym strukturę drzewa wizualnego (visual tree). Dzięki ControlTemplate można na przykład zamienić standardowy przycisk (Button) na przycisk z własnym tłem, animacjami i efektami.

ItemsPanelTemplate

Określa, w jakim panelu będą rozmieszczane elementy kolekcji. Przykładowo, zmiana domyślnego VirtualizingStackPanel na WrapPanel pozwala uzyskać układ kafelkowy.

TemplateSelector

Klasa pochodna DataTemplateSelector umożliwia dynamiczny wybór szablonu w zależności od danych lub stanu aplikacji.

Składnia XAML

Szablony definiuje się w sekcji <Resources> lub bezpośrednio w atrybucie kontrolki (Template, ItemTemplate itd.). Poniżej przykładowy kod definiujący DataTemplate dla elementu listy:

<Window.Resources>
    <DataTemplate x:Key="PersonTemplate">
        <StackPanel Orientation="Horizontal">
            <TextBlock Text="{Binding Imie}" FontWeight="Bold"/>
            <TextBlock Text=" "/>
            <TextBlock Text="{Binding Nazwisko}" FontStyle="Italic"/>
        </StackPanel>
    </DataTemplate>
</Window.Resources>

<ListBox ItemsSource="{Binding Osoby}"
         ItemTemplate="{StaticResource PersonTemplate}" />

Przykład ControlTemplate dla przycisku:

<Button Content="Kliknij mnie">
    <Button.Template>
        <ControlTemplate TargetType="Button">
            <Border Background="LightBlue"
                    CornerRadius="5"
                    BorderBrush="DarkBlue"
                    BorderThickness="2">
                <ContentPresenter HorizontalAlignment="Center"
                                  VerticalAlignment="Center"/>
            </Border>
            <ControlTemplate.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter TargetName="border"
                            Property="Background"
                            Value="SkyBlue"/>
                </Trigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>
    </Button.Template>
</Button>

Historia i wersje

Mechanizm szablonów w XAML został wprowadzony wraz z Windows Presentation Foundation w 2006 roku. Później został zaadaptowany w platformach takich jak Silverlight, Universal Windows Platform oraz Xamarin.Forms, które również wykorzystują XAML do definiowania interfejsu.

Najlepsze praktyki

Używaj stylów do grupowania wspólnych właściwości, a szablonów do definiowania struktury UI.
W miarę możliwości korzystaj z TemplateBinding, aby odwoływać się do właściwości kontrolki z poziomu szablonu.
Unikaj nadmiernego zagłębiania się w drzewo wizualne – zachowaj prostotę i czytelność szablonu.
Stosuj TemplateSelector, gdy potrzebny jest dynamiczny wybór szablonu w zależności od danych.